<!--
http://harmattan-dev.nokia.com/docs/platform-api-reference/xml/daily-docs/libqt4/declarative-modelviews-webview-googlemaps-qml.html
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder
  var map
  var trafficLayer
  function goToLatLng(latlng,bounds) {
    if (map) {
        map.setCenter(latlng)
        //map.fitBounds(bounds)
    } else {
        var myOptions = {
          zoom: 8,
          center: latlng,
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
    }
  }
  function initialize() {
    geocoder = new google.maps.Geocoder();
    if (window.qml.address) {
        goToAddress()
    } else {
        goToLatLng(new google.maps.LatLng(window.qml.lat,window.qml.lng));
    }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        window.qml.lat = initialLocation.lat;
        window.qml.lng = initialLocation.lng;
        goToLatLng(initialLocation);
      });
    }
  }
  function goToAddress() {
      if (geocoder) {
        var req = {
            address: window.qml.address,
        }
        if (map)
            req.bounds = map.getBounds()
        window.qml.status = "Loading";
        geocoder.geocode(req, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            window.qml.status = "Ready";
            goToLatLng(results[0].geometry.location,results[0].geometry.bounds);
          } else {
            window.qml.status = "Error";
          }
        });
      }
  }
</script>
</head>
<body onload="initialize()" leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
